<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义——轮播图</title>
    <link rel="stylesheet" href="/web/layui/css/layui.css">
    <style>
        #banner img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="layui-carousel" id="banner">
    <div carousel-item>
        <div>
            <video src="/web/video/study.mp4"
                   muted="muted"
                   autoplay="autoplay"
                   loop="loop"
                   controls="controls"
                   controlslist="nodownload"
                   poster="/back.png"
                   style="width: 100%;height: 250px;"></video>
        </div>
        <div><img src="/back.png"></div>
        <div><img src="/back.png"></div>
    </div>
</div>
</body>
</html>
<script src="/web/jquery.min.js"></script>
<script src="/web/layui/layui.js"></script>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#banner'
            ,width: '100%'   //设置容器宽度
            ,height: '250px' //设置容器高度
            ,autoplay:false
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
